<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/swiper-4.3.5.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/mescroll.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/pages/notice/list.css" />
</head>

<body style="background-color: #fff;">
	<div class="loading-warpper" id="loading">
		<div class="loading">
			<div class="item1"></div>
			<div class="item2"></div>
		</div>
	</div>
	<header class="mui-bar mui-bar-nav">
		<div id="header"></div>
		<div class="header">
			<a class="mui-action-back mui-icon mui-icon mui-icon-arrowleft"></a>
			<h1 class="mui-title" id="title" style="opacity: 0;">社区公告</h1>
		</div>
	</header>
	<div id="mescroll" class="mescroll">
		<div class="content">
			<div id="content"></div>
			<div class="header-title">社区公告</div>
			<div class="swiper">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="item in list"  @click="commentTap(item)">
							<img class="swiper-img" :src="item.path" />
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div class="list">
				<div class="item" v-for="item in shujiList" @click="commentTap(item)">
					<div class="left">
						<img class="icon" src="../../../images/home/notice/yuan.png">
						<div class="desc">
							<div class="title font-14 font-14" v-text="item.pnTitle"></div>
							<div class="info font-12 font-c-7f">
								<span v-text="item.neiName"></span>
								<span>发布于{{item.pnCD | timeago}}</span>
							</div>
						</div>
					</div>
					<div class="right">
						<img  :imgurl="item.path" src="../../../images/jiazai.gif" />
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/swiper-4.3.5.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
		mui.init()
		var mescroll;
		var title = document.getElementById('title');
		mui.plusReady(function () {
			if (!mui.os.android) {
				FastClick.attach(document.body);
			}
			Util.StatusbarHeight('header');
			Util.StatusbarHeight('content');
			mescroll = new MeScroll("mescroll", {
				down: {
					callback: downCallback
				},
				up: {
					auto: true,
					lazyLoad: {
						use: true,
						attr: 'imgurl',
						showClass: 'mescroll-lazy-in',
						delay: 500,
						offset: 200
					},
					onScroll: function (mescroll, y, isUp) {
						var height = 30
						if (y > height) {
							var opacity = y / 140
							opacity = opacity > 1 ? 1 : opacity
							title.style.opacity = opacity
						} else {
							title.style.opacity = 0
						}
					}
				}
			})
		})

		var mySwiper
		var app = new Vue({
			el: "#mescroll",
			data: {
				list: [],
				shujiList: []
			},
			filters: {
				timeago: function (value) {
					return Util.timeago(value)
				}
			},
			methods: {
				commentTap: function (item) {
					mui.openWindow({
						url: 'details.html',
						id: 'details.html',
						styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
							titleNView: { // 窗口的标题栏控件
								titleText: item.pnTitle, // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
								titleSize: "17px", // 字体大小,默认17px
								type: 'transparent',
								backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
								autoBackButton: true,
								splitLine: { // 标题栏控件的底部分割线，类似borderBottom
									color: "#eeeeee", // 分割线颜色,默认值为"#CCCCCC"  
									height: "1px" // 分割线高度,默认值为"2px"
								}
							}
						},
						extras: {
							pnID: item.pnID,
						},
						waiting: {
							autoShow: false
						}
					})
				}
			},
		})




		function downCallback() {
			GetProprietorNotice() //获取社区公告推荐
			GetNoticeRecommend() // 获取社区公告列表
		}

		function GetProprietorNotice() {
			mui.post(Util.HTTP + 'api/Home/GetProprietorNotice', {
				neiID: Util.getState('neiID').neiID
			}, function (res) {
				if (res.code == 1001) {
					app.shujiList = res.data
					document.getElementById('loading').style.display = 'none'
				} else {
					mui.toast(res.message)
				}
			})
		}

		function GetNoticeRecommend() {
			mui.post(Util.HTTP + 'api/Home/GetNoticeRecommend', {
				neiID: Util.getState('neiID').neiID
			}, function (res) {
				if (res.code == 1001) {
					app.list = res.data
					app.$nextTick(function () {
						mySwiper = new Swiper('.swiper-container', {
							loop: true,
							preventClicks: false, //默认true
							autoplay: {
								delay: 3000,
							}, //等同于以下设置
							// 如果需要分页器
							pagination: {
								el: '.swiper-pagination',
							}
						})
					})
					mescroll.endSuccess();
				} else {
					mui.toast(res.message)
				}
			})
		}
	</script>
</body>

</html>
